<template>
  <div>
    <!-- 
      如何动态设置标签类名？
      答: v-bind:class="{ 类名: 布尔值 }"
        当布尔值为true表示使用此类名，false表示不使用此类名
     -->
    <p :class="{ redStr: bool }">我是一个段落标签，需要显示红色</p>

    <!-- 
      动态设置行内样式
      语法：:style="{css属性名：值}"

      注意：属性名由多个单词组成的，动态绑定样式的时候需要改为小驼峰或者用引号将属性名引起来
     -->
    <p :style="{ 'font-Size': fontSize }">我是用来测试动态设置行内样式的</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bool: true,
      fontSize: "50px",
    };
  },
};
</script>

<style lang="less" scoped>
.redStr {
  color: red;
}
</style>